<!-- 搜索结果组件 -->
<template>
	<view class="shop-list">
		<view class="shop-title f-color">
<!-- 			<view class="shop-item">
				<view class="active">价格</view>
				<view class='shop-icon'>
					<view class="iconfont icon-shangjiantou up"></view>
					<view class="iconfont icon-xiajiantou down"></view>
				</view>
			</view> -->
			<view 
			class="shop-item" 
			v-for="(item,index) in shopList.data" 
			:key='index'
			@tap="changTap(index)"
			>
				<view :class="shopList.currentIndex==index?'f-active-color':''">{{item.name}}</view>
				<view class='shop-icon'>
					<view class="iconfont icon-shangjiantou up" :class="item.state===1?'f-active-color':''"></view>
					<view class="iconfont icon-xiajiantou down" :class="item.state===2?'f-active-color':''"></view>
				</view>
			</view>
		</view>
		<Lines/>
		
		<CommondityList  :commodityDataList='Shopdata'></CommondityList>
	</view>
</template>

<script>
	import $http from '@/common/api/request.js'
	import Lines from './Line.vue'
	import CommondityList from './CommondityList.vue'
	export default{
		data() {
			return {
				shopList:{
					currentIndex:0,
					data:[
						{name:'价格',state:1,key:'pprice'},
						{name:'折扣',state:0,key:'discount'},
						{name:'品牌',state:0,key:'shop_id'}
					]
				},
				Shopdata:[]
			}
		},
		props:{
			keyword:String
		},
		components:{
			Lines,
			CommondityList
		},
		mounted(){
			this.getData()
		},
		computed:{
			orderBy(){
				// 拿到当前对象
				let obj=this.shopList.data[this.shopList.currentIndex]
				let val=obj.state===1?'asc':'desc'
				return {
					[obj.key]:val
				}
			}
		},
		methods:{
			// 请求数据的方法
			getData(){
				$http.request({
					url:'/goods/search',
					data:{
						name:this.keyword,//搜索关键词
						...this.orderBy//排序方式
					}
				}).then((res)=>{
					this.Shopdata=res
				}).catch(()=>{
					uni.showToast({
						title:'请求失败',
						icon:'none'
					})
				})
			},
			changTap(index){
				// 重新请求数据
				this.getData()
				// 索引值
				let idx=this.shopList.currentIndex;
				// 具体的对象
				let item= this.shopList.data[idx];
				if(idx==index){
						return item.state=item.state===1?2:1
				}
				let newItem=this.shopList.data[index];
				item.state=0
				this.shopList.currentIndex=index
				newItem.state=1
			}
		}
	}
</script>

<style scoped>
	.shop-title{
		display: flex;
		justify-content: center;
	}
	.shop-item{
		display: flex;
		flex: 1;
		height: 80rpx;
		justify-content: center;
		align-items: center;
	}
	.shop-icon{
		position: relative;
		margin-left: 10rpx;
		
	}
	.iconfont{
		width: 16rpx;
		height: 8rpx;
		position: absolute;
		left: 0;
	}
	.up{
		top:-24rpx
	}
	.down{
		top:-4rpx
	}
</style>
